<template>
   <div class="contact-paln" v-loading="loading" v-if="refresh==='plan'&&!loading">
     <!-- 已完成联系计划 -->
    <!--<affix :label="$t('customer.contactPlan.finishedContactPlan')" class="create-cp" v-show="isFinishedPlanShow">-->
     <!--</affix>-->
    <div class="webchat-contact-box" v-show="isFinishedPlanShow">
      <div class="label">{{$t('customer.contactPlan.finishedContactPlan')}}</div>
      <finished-contact-plan
              :executorNew="executorNew"
              :planTime="planTime"
              :planContent="planContent"
              :isFinishedPlanShow="isFinishedPlanShow"
              @cancel="cancelDeal">
      </finished-contact-plan>
    </div>

      <!-- 新建，编辑联系计划 -->
      <!--<affix :label="editTitle" class="create-cp" v-if="isEditShow">-->
      <!--</affix>-->
     <div class="webchat-contact-box" v-if="isEditShow">
       <div class="label">{{editTitle}}</div>
       <add-contact-plan
               @submit="submitForm"
               @update="update"
               :initForm="initForm"
               :editType="editType">
       </add-contact-plan>
     </div>


      <!-- 联系计划 -->
      <!--<affix :label="title" class="create-cp" v-show="isCurrentPlanShow">-->
      <!--</affix>-->
     <div class="webchat-contact-box" v-show="isCurrentPlanShow">
       <div class="label">{{title}}</div>
       <update-contact-plan
               @edit="edit"
               @deal="deal"
               :executorNew="executorNew"
               :planTime="planTime"
               :planContent="planContent"
               :isCurrentPlanShow="isCurrentPlanShow"
       ></update-contact-plan>
     </div>

      <!-- 联系计划历史 -->
     <!--<affix :label="$t('customer.contactPlan.contactPlanHistory')" class="history-cp">-->
     <!--</affix>-->

     <div class="history-cp" >
       <div class="label" @click="showHistory = !showHistory">
         <span>{{$t('customer.contactPlan.contactPlanHistory')}}</span>
         <i class="icon el-icon-arrow-down" v-show="!showHistory"></i>
         <i class="icon el-icon-arrow-up" v-show="showHistory"></i>
       </div>
       <show-contact-plan-history
               v-show="showHistory"
               :linkPlan="linkPlan"
               :cid="cid"
               ref="showContactPlanHistory"
               :isLoadMoreShow="isLoadMoreShow"
               @load-more="loadMore">
       </show-contact-plan-history>
     </div>
    </div>
</template>
<script>
  import Affix from '@/components/ui-modules/affix/Affix.vue'
  import ShowContactPlanHistory from './ShowContactPlanHistory'
  import FinishedContactPlan from '@/components/public-modules/cust-tab-content/contact-plan/FinishedContactPlan'
  import AddContactPlan from './AddContactPlan'
  import UpdateContactPlan from '@/components/public-modules/cust-tab-content/contact-plan/UpdateContactPlan'
  import plan from '@/components/public-modules/cust-tab-content/contact-plan/plan.js'
  export default {
    name: 'ContactPlan',
    mixins: [plan],
    data () {
      return {
        showHistory: true // 联系历史展开收起的开关
      }
    },
    components: {
      Affix,
      ShowContactPlanHistory,
      FinishedContactPlan,
      AddContactPlan,
      UpdateContactPlan
    }
  }
</script>
<style lang="stylus" scoped>
@import '../../../../../../assets/common.styl'
  .time
    line-height 20px
    text-align center
    display inline-block
    margin-left 3px
    color $cf-gray4
  .fini
    color $cf-gray5
  strong
    display inline-block
    width 22px
    height 22px
    position relative
    top 7px
    cursor pointer
    .iconfont
      font-size 18px
      color $c-main
  .create-cp
    margin-bottom 0px
    .el-form-item
      color #c1c1c1
      margin-bottom 8px
      &:last-child
        margin-bottom 0px
    .el-button
      width 90px
      float right
      padding 8px 0
      font-size 12px
  .history-cp
    margin-top 20px
    .label
      cursor pointer
    .h-cp-content
      &:before
        content ""
        clear both
      li
        margin-top 12px
        color $cf-level1
        display flex
        .name1
          color $c-main
          margin 0 10px
        .date
          margin 0 12px
        .plan_content
          display inline-block
          flex 1
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          vertical-align top
      .first
        margin-top 0
  .btn
    cursor pointer
    margin 0 auto
    width 130px
    color $cf-white
    text-align center
    background-color $c-main
    line-height 30px
    height 30px
    border-radius 5px
    .icon-shuaxin
      display inline-block
      span
        font-size 12px
        float right
        padding-left 5px
  .next-page
    margin-top 20px
  .create-cp__finish
    margin-bottom 0
  .contact-paln
    padding 0 20px
  .webchat-contact-box
    margin-top 20px
    border-bottom 1px solid #E0E0E0
    padding-bottom 20px
  .label
    font-size 14px
    font-weight bold
    margin-bottom 10px
    color #595959
</style>
